<template>
  <el-dropdown :hide-on-click="false" class="whole-button">
    <el-button size="small" style="padding: 8px 6px;height:26px">
      <svg-icon icon-class="column-setting" />
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-scrollbar :style="{ height: realHeight + 'px' }">
          <el-dropdown-item v-for="(item, index) in tableHeader" :key="index">
            <el-checkbox v-model="item.isShow" @change="handleChange">
              {{ item.label }}
            </el-checkbox>
          </el-dropdown-item>
        </el-scrollbar>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts" name="slDropdown">
import { ref, onMounted } from 'vue'

interface TableHeaderItem {
  label: string
  isShow: boolean
}

interface Props {
  tableHeader: TableHeaderItem[]
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'buttonClick'): void
}>()

const realHeight = ref(0)

onMounted(() => {
  realHeight.value = props.tableHeader.length * 32 + 32
  if (realHeight.value > 400) {
    realHeight.value = 400
  }
})

const handleChange = () => {
  emit('buttonClick')
}
</script>

<style>
</style>
